<template>
  定制样式
  <div id="container"></div>
</template>

<script lang="ts">
  import { defineComponent, onMounted } from 'vue';
  import { Graph } from '@antv/x6';
  export default defineComponent({
    setup() {
      const data = {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            x: 0, // Number，必选，节点位置的 x 值
            y: 0, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              body: {
                fill: '#2ECC71',
                stroke: '#000',
                strokeDasharray: '10,2',
              },
              label: {
                text: 'Hello',
                fill: '#333',
                fontSize: 20,
              },
            },
          },
          {
            id: 'node2', // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'world', // String，节点标签
            attrs: {
              body: {
                fill: '#F39C12',
                stroke: '#000',
                rx: 16,
                ry: 16,
              },
              label: {
                text: 'World',
                fill: '#333',
                fontSize: 18,
                fontWeight: 'bold',
                fontVariant: 'small-caps',
              },
            },
          },
        ],
        // 边
        edges: [
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
            attrs: {
              line: {
                stroke: 'orange',
              },
            },
          },
        ],
      };
      let graph = {};
      onMounted(() => {
        graph = new Graph({
          container: document.getElementById('container') as HTMLElement,
          width: 800,
          height: 600,
          background: {
            color: '#fffbe6', // 设置画布背景颜色
          },
          grid: {
            size: 10, // 网格大小 10px
            visible: true, // 渲染网格背景
          },
        });
        (graph as any).fromJSON(data);
      });
      return {};
    },
  });
</script>

<style scoped></style>
